<template>
    <view>
        <view class="mask" @click="cancel"></view>
        <!-- 注册成功 -->
        <view class="model" v-if="modelType == 1">
            <view class="titleTip" v-if="!logo">注册成功</view>
            <view class="logo">
                <image :src="imgUrl + logo" mode="widthFix"></image>
            </view>
            <view class="msgTip">账号可用于下次登录</view>
            <view class="btns">
                <view class="btn-cancel" @click="cancel">取消</view>
                <view class="btn-yes thmeBg" @click="backPage" :style="{ '--color': color }">返回</view>
            </view>
        </view>
        <!-- 判断vid -->
        <view class="model" v-if="modelType == 2" style="min-height: 494rpx">
            <view class="titleTip" v-if="!logo">请先登录/注册</view>
            <view class="logo">
                <image :src="imgUrl + logo" mode="widthFix"></image>
            </view>
            <view class="msgTip">会员登录，获取更多优惠</view>
            <view class="btns">
                <!-- #ifdef H5 -->
                <button class="btn-cancel" data-type="1" @click="toRegister">登录</button>
                <!-- #endif -->

                <!-- #ifdef MP-WEIXIN -->
                <button class="btn-cancel" v-if="!noAuth" @click="getuserinfos_">获取授权</button>
                <!-- <button class="btn-cancel" v-if='!noAuth' open-type='getUserInfo' @getuserinfo='getuserinfo_'>获取授权</button> -->
                <button class="btn-yes thmeBg" :style="{ '--color': color }" style="color: white" type="default" v-if="noAuth" open-type="getPhoneNumber" @getphonenumber="getPhoneNumberHandler">
                    快捷登录
                </button>

                <!-- #endif -->

                <!-- #ifdef MP-TOUTIAO || APP-PLUS -->
                <button class="btn-cancel thmeColor" data-type="1" @click="toRegister" :style="{ '--color': color }">立即登录</button>
                <!-- #endif -->

                <!-- #ifndef MP-WEIXIN -->
                <view class="btn-yes thmeBg" :style="{ '--color': color }" data-type="0" @click="toRegister">手动注册</view>
                <!-- #endif -->
            </view>
        </view>

        <view class="model" v-if="modelType == 100" style="min-height: 494rpx">
            <view class="logo">
                <image :src="imgUrl + logo" mode="widthFix"></image>
            </view>
            <view class="msgTip">会员登录，获取更多优惠</view>
            <view class="btns">
                <!-- #ifdef MP-WEIXIN -->
                <!-- <button class="btn-yes thmeBg" :style="{'--color': color}" style="color: white;" type="default" v-if='noAuth' open-type="getPhoneNumber" @getphonenumber="getPhoneNumberHandler">快捷登录</button> -->
                <button class="btn-cancel" @click="getuserinfos_">获取授权</button>
                <!-- #endif -->
            </view>
        </view>

        <!-- 通用版 -->
        <view class="model" v-if="modelType == 99">
            <view class="titleTip">{{ title }}</view>
            <view class="msgTip">{{ msg }}</view>
            <view class="btns">
                <view class="btn-cancel" v-if="btn1" @click="cancel">{{ btn1 }}</view>
                <view class="btn-cancel" v-if="btn3" @click="backHome">{{ btn3 }}</view>
                <view class="btn-yes thmeBg" :style="{ '--color': color }" @click="certain">{{ btn2 }}</view>
            </view>
        </view>

        <Coupon v-if="CouponShow && couponArry" :couponArry="couponArry" @closeFunc="CouponShow = false"></Coupon>
    </view>
</template>

<script>
    var that;
    import API from '../../api/index.js';
    import Coupon from '../Coupons.vue';
    export default {
        /**
         * goHome登录成功后是否返回首页  0不返回  1/null返回
         * btn1:取消按钮文字
         * btn2：确定按钮文字
         * btn3：返回首页文字
         * msg：提示文字
         * title: 标题
         * **/
        props: ['type', 'title', 'msg', 'goHome', 'btn1', 'btn2', 'btn3', 'btn1_url', 'btn2_url', 'jump'],
        data() {
            return {
                color: getApp().globalData.color,
                modelType: this.type, // 弹窗类型
                openid: '',
                userinfo: '',
                noAuth: null, // 用户未授权 true已授权 false未授权
                logo: '',
                imgUrl: this.imgUrl,
                CouponShow: false,
                couponArry: ''
            };
        },
        components: {
            Coupon
        },
        watch: {
            type(e) {
                this.modelType = e;
            }
        },
        created() {
            that = this;
            if (that.type == 1 || that.type == 2 || that.type == 100) {
                that.logo = uni.getStorageSync('startUp').logo_img;
            }
            if (that.type == 2) {
                that.openid = uni.getStorageSync('openid');
                that.userinfo = uni.getStorageSync('userinfo');
                if (!that.openid || !that.userinfo || that.userinfo.nickName == '微信用户') {
                    API.user.getOpenid().then((openid) => {
                        that.openid = openid;
                    });
                } else {
                    that.noAuth_type = true;
                }
            }
        },
        methods: {
            backPage() {
                uni.navigateBack({
                    delta: 1
                });
            },
            cancel() {
                //取消

                if (this.jump == 'jumpRoute') {
                    console.log(this.btn1_url);
                    if (this.btn1_url.indexOf('/pages/tabbar/tabbar') != -1) {
                        this.$common.backHome();
                        return;
                    }
                    if (this.btn1_url.indexOf('close') != -1) {
                        this.$emit('cancelFunc');
                    }
                } else {
                    // #ifdef H5
                    if (this.btn1_url.indexOf('http') != -1) {
                        window.location.href(this.btn1_url);
                    } else {
                        this.$emit('cancelFunc');
                    }
                    // #endif
                }
            },
            certain() {
                //确定
                if (this.btn2_url.indexOf('close') != -1) {
                    this.$emit('cancelFunc');
                } else {
                    uni.navigateTo({
                        url: this.btn2_url
                    });
                }

                if (this.jump == 'jumpRoute') {
                    if (this.btn2_url.indexOf('/pages/tabbar/tabbar') != -1) {
                        this.$common.backHome();
                        return;
                    }
                    if (this.btn2_url.indexOf('close') != -1) {
                        this.$emit('cancelFunc');
                    } else {
                        uni.navigateTo({
                            url: this.btn2_url
                        });
                    }
                } else {
                    // #ifdef H5
                    if (this.btn2_url.indexOf('http') != -1) {
                        window.location.href(this.btn2_url);
                    } else {
                        this.$emit('cancelFunc');
                    }
                    // #endif
                }

                // this.$emit("certain")
            },
            toRegister(e) {
                var type = e.currentTarget.dataset.type;
                this.$emit('cancelFunc');
                // uni.navigateTo({
                // 	url: '/userPage/login/binding?type=' + type
                // })
            },
            getuserinfos_(e) {
                let that = this;
                uni.getUserProfile({
                    desc: 'Wexin',
                    success: (res) => {
                        if (res.userInfo) {
                            uni.setStorage({
                                key: 'userinfo',
                                data: res.userInfo,
                                success() {
                                    that.noAuth = true;
                                }
                            });

                            that.$emit('showModal');
                            API.user.getVid();
                        } else {
                            uni.showModal({
                                title: '拒绝授权会影响功能使用',
                                icon: 'none',
                                showCancel: false
                            });
                            that.$emit('showModal');
                        }
                        // console.log(res)
                    },
                    fail: (err) => {
                        console.log(err);
                    }
                });
            },
            getuserinfo_(e) {
                var that = this;
                if (e.detail.userInfo) {
                    uni.setStorage({
                        key: 'userinfo',
                        data: e.detail.userInfo,
                        success() {
                            that.noAuth = true;
                        }
                    });
                }
            },

            getPhoneNumberHandler(e) {
                const info = uni.getStorageSync('userinfo');
                if (e.detail.errMsg == 'getPhoneNumber:ok') {
                    that.$http
                        .post({
                            url: '/zzj_singleSaleApi/authorizedLogin',
                            data: {
                                encryptedData: e.detail.encryptedData,
                                iv: e.detail.iv,
                                session_key: uni.getStorageSync('session_key'),
                                bid: uni.getStorageSync('bid'),
                                openid: that.openid,
                                nickName: info.nickName, //暱稱
                                headimg: info.avatarUrl, //頭像
                                share_v_id: uni.getStorageSync('share_v_id'), //分享id
                                city: info.city,
                                sex: info.gender ? info.gender : info.sex, //性別
                                country: info.country, //國家
                                province: info.province //省份
                            }
                        })
                        .then((res) => {
                            if (res.status) {
                                if (res.v_id && res.v_id != 0) {
                                    uni.setStorage({
                                        key: 'vid',
                                        data: res.v_id
                                    });
                                }
                                if (res.coupon && res.coupon.status == 1) {
                                    // 1 有券  0 无券
                                    that.couponArry = true;
                                    that.CouponShow = res.coupon.data;
                                }
                                /**
                                 * 重新走一次获取用户其他信息：如是否有购买权限
                                 * **/
                                API.user.getVid();
                                that.cancel(); // 关闭弹窗
                            }
                            uni.showToast({
                                title: res.msg,
                                icon: 'none',
                                duration: 2000
                            });
                        });
                }
            }
            // getPhoneNumberHandler(e) {
            // 	const info = uni.getStorageSync('userinfo');
            // 	console.log(info,'1')
            // 	let vid = uni.getStorageSync('vid')
            // 	if(!that.openid || !that.userinfo ||!vid){
            // 		API.user.getOpenid().then(openid=>{
            // 			that.openid = openid
            // 			// #ifdef MP
            // 			that.authorizedLogin(e)
            // 			// #endif
            // 		})
            // 	}
            // }
        }
    };
</script>

<style scoped lang="scss">
    /* 弹窗样式 */
    .masks {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1000;
    }

    .model {
        position: fixed;
        width: 654rpx;
        /* height: 320rpx; */
        left: 50%;
        top: 50%;
        border-radius: 32rpx;
        transform: translate(-50%, -50%);
        background: white;
        overflow: hidden;
        z-index: 999;
    }

    .titleTip {
        font-size: 36rpx;
        height: 111rpx;
        line-height: 160rpx;
        font-weight: bold;
        text-align: center;
    }

    .msgTip {
        font-size: 28rpx;
        color: #999999;
        text-align: center;
        padding: 30rpx 66rpx;
    }

    .btns {
        display: flex;
        justify-content: center;
        padding: 50rpx;
    }

    .btn-cancel {
        width: 260rpx;
        font-size: 30rpx;
        text-align: center;
        color: #969696;
        border: 1px solid #afafaf;
        border-radius: 68rpx;
        line-height: 68rpx;
        background: none;
        margin: 0 10rpx;
    }

    .btn-yes {
        width: 260rpx;
        font-size: 30rpx;
        color: white;
        text-align: center;
        border-radius: 68rpx;
        line-height: 68rpx;
        margin: 0 10rpx;
    }

    .logo {
        display: block;
        width: 222rpx;
        padding-top: 40rpx;
        margin: 0 auto;

        image {
            width: 100%;
        }
    }

    .mask {
        display: flex;
        align-items: center;
        justify-content: center;

        .model {
            background-color: #ffffff;
            border-radius: 12rpx;
            width: 600rpx;
            text-align: center;
            overflow: hidden;
            padding-top: 20rpx;

            .title {
                font-size: 32rpx;
                font-weight: bold;
                padding: 40rpx;
                color: #333333;
            }

            .info {
                font-size: 28rpx;
                padding: 20rpx 40rpx 40rpx;
                color: #666666;
            }

            .btns {
                .cancel {
                    flex: 1;
                    line-height: 88rpx;
                    color: #999999;
                    border-top: 1px solid #eeeeee;
                }

                .certain {
                    flex: 1;
                    line-height: 88rpx;
                    background-color: #f8814e;
                    color: white;
                }
            }
        }
    }
</style>